<script setup>
import {ref, watch} from "vue";
import {VueUiVerticalBar} from "vue-data-ui";
import "vue-data-ui/style.css"


const config = ref({
  "responsive": false,
  "theme": "",
  "customPalette": [],
  "useCssAnimation": true,
  "style": {
    "fontFamily": "inherit", "chart": {
      "backgroundColor": "#ffffff00",
      "color": "#1A1A1Aff",
      "layout": {
        "bars": {
          "sort": "desc",
          "useStroke": false,
          "strokeWidth": 2,
          "height": 30,
          "gap": 15,
          "borderRadius": 4,
          "offsetX": 0,
          "paddingRight": 0,
          "useGradient": true,
          "gradientIntensity": "29",
          "fillOpacity": 90,
          "underlayerColor": "#FFFFFF",
          "dataLabels": {
            "color": "#1A1A1Aff",
            "bold": true,
            "fontSize": 15,
            "value": {"show": true, "roundingValue": 0, "prefix": "", "suffix": "mg/kg", "formatter": null},
            "percentage": {"show": false, "roundingPercentage": 0},
            "offsetX": 0
          },
          "nameLabels": {"show": true, "color": "#1A1A1Aff", "bold": true, "fontSize": 21, "offsetX": -8},
          "parentLabels": {"show": true, "color": "#1A1A1Aff", "bold": false, "fontSize": 10, "offsetX": 0}
        },
        "highlighter": {"color": "#1A1A1Aff", "opacity": 5},
        "separators": {"show": true, "color": "#e1e5e8ff", "strokeWidth": 1}
      },
      "title": {
        "text": "土壤氮磷钾含量",
        "color": "#1A1A1Aff",
        "fontSize": 18,
        "bold": true,
        "textAlign": "center",
        "paddingLeft": 0,
        "paddingRight": 0,
        "subtitle": {"color": "#A1A1A1ff", "text": "", "fontSize": 16, "bold": false}
      },
      "legend": {
        "show": true,
        "bold": true,
        "backgroundColor": "#FFFFFF00",
        "color": "#1A1A1Aff",
        "fontSize": 14,
        "position": "top",
        "roundingValue": 0,
        "roundingPercentage": 0,
        "prefix": "",
        "suffix": "mg/kg"
      },
      "tooltip": {
        "show": true,
        "color": "#1A1A1Aff",
        "backgroundColor": "#FFFFFFff",
        "fontSize": 14,
        "customFormat": null,
        "borderRadius": 4,
        "borderColor": "#e1e5e8",
        "borderWidth": 1,
        "backgroundOpacity": 30,
        "position": "center",
        "offsetY": 24,
        "showValue": true,
        "showPercentage": true,
        "roundingValue": 0,
        "roundingPercentage": 0,
        "prefix": "",
        "suffix": ""
      }
    }
  },
  "userOptions": {
    "show": true,
    "position": "right",
    "buttons": {
      "tooltip": true,
      "pdf": true,
      "csv": true,
      "img": true,
      "table": true,
      "labels": false,
      "fullscreen": true,
      "sort": true,
      "stack": false,
      "animation": false,
      "annotator": true
    },
    "buttonTitles": {
      "open": "Open options",
      "close": "Close options",
      "tooltip": "Toggle tooltip",
      "pdf": "Download PDF",
      "csv": "Download CSV",
      "img": "Download PNG",
      "table": "Toggle table",
      "fullscreen": "Toggle fullscreen",
      "sort": "Toggle sort",
      "annotator": "Toggle annotator"
    }
  },
  "table": {
    "show": false,
    "responsiveBreakpoint": 400,
    "th": {"backgroundColor": "#FFFFFFff", "color": "#1A1A1Aff", "outline": "none"},
    "td": {
      "backgroundColor": "#FFFFFFff",
      "color": "#1A1A1Aff",
      "outline": "none",
      "roundingValue": 0,
      "roundingPercentage": 0,
      "prefix": "",
      "suffix": ""
    }
  },
  "translations": {
    "parentName": "Group",
    "childName": "Serie",
    "value": "Value",
    "percentageToTotal": "% / total",
    "percentageToSerie": "% / group"
  }
})


const dataset = ref([
  {
    "name": "氮含量",
    "value": 70,
    "color": "#42d392",
    "children": []
  },
  {
    "name": "磷含量",
    "value": 30,
    "color": "#6376DD",
    "children": []
  },
  {
    "name": "钾含量",
    "value": 120,
    "color": "#ff6400",
    "children": []
  }
]);

import {useCounterStore} from '@/stores/counter.ts'
import {storeToRefs} from 'pinia';
import {Timer} from "@vicons/carbon";
const counterStore = useCounterStore();
const {
  token,
  nowData,
  refreshFlag,

} = storeToRefs(counterStore)
const{
  getNowData
} = counterStore

watch(refreshFlag, (newValue) => {
  // console.log(nowData.value["327061430532576250"])
  dataset.value[0].value = nowData.value["327061430532576242"].value
  dataset.value[1].value = nowData.value["327061430532576243"].value
  dataset.value[2].value = nowData.value["327061430532576244"].value
}, {deep: true})

</script>

<template>
  <div style="width:18vw">
    <VueUiVerticalBar :config="config" :dataset="dataset"/>
  </div>
</template>

